<div style="width:600px; height:550px; margin-left:30px; background-color:#fff;">
  <center><img src="<?php e($this->base) ?>/img/step1.png" style="margin-top:15px;" /></center>
  <div id="pages" style="padding:15px 20px 20px 55px; width:480px;">
    <form id="form-register" method="post" action="<?php e($this->base); ?>/<?php e($this->params['controller']); ?>/register" onsubmit="return save();">
        <div style="margin-top:5px;"><?php __('If you already have an account with us, please login at the.'); ?> <a href="<?php e($this->base); ?>/members/login">login page</a></div>
        <div class="fLeft" style="margin:10px;">
          <h3 style="margin-bottom:3px;"><?php __('Your Personal Details'); ?></h3>
          <label><?php __('Full Name'); ?>:</label>
          <div style="margin:1px 0 3px;"><input type="text" id="name" name="name" class="input req" /></div>
          <label><?php __('E-mail'); ?>:</label>
          <div style="margin:1px 0 3px;"><input type="text" id="username01" name="username" class="input req" /></div>
          <label><?php __('Telephone'); ?>:</label>
          <div style="margin:1px 0 18px;"><input type="text" id="telephone" name="telephone" class="input req" /></div>
          <label><?php __('Fax'); ?>:</label>
          <div style="margin:1px 0 18px;"><input type="text" id="fax" name="fax" class="input" /></div>
          <h3 style="margin-bottom:3px;"><?php __('Your Password'); ?></h3>

          <label><?php __('Password'); ?>:</label>
          <div style="margin:1px 0 3px;"><input type="password" id="password01" name="password" class="input req" /></div>
          <label><?php __('Password Confirm'); ?>:</label>
          <div style="margin:1px 0 3px;"><input type="password" id="password02" name="password2" class="input req" /></div>
        </div>
        <div class="fRight" style="margin-top:10px;">
          <h3 style="margin-bottom:3px;"><?php __('Your Address'); ?></h3>
          <label><?php __('Address'); ?>:</label>
          <div style="margin:1px 0 3px;"><textarea rows="3" cols="20" id="address" name="address" class="req"></textarea></div>
          <label><?php __('Post Code'); ?>:</label>
          <div style="margin:1px 0 18px;"><input type="text" id="postcode" name="postcode" class="input req" /></div>
          <label><?php __('City'); ?>:</label>
          <div style="margin:1px 0 18px;"><input type="text" id="city" name="city" class="input req" /></div>
          <label><?php __('Country'); ?>:</label>
          <div style="margin:1px 0 18px;">
            <select name="country" id="country" class="select req">
              <option value="">&nbsp;</option>
              <option value="Argentina">Argentina</option>
              <option value="Australia">Australia</option>
              <option value="Bahamas">Bahamas</option>
              <option value="Bahrain">Bahrain</option>
              <option value="Belize">Belize</option>
              <option value="Bermuda">Bermuda</option>
              <option value="Brazil">Brazil</option>
              <option value="British Virgin Islands">British Virgin Islands</option>
              <option value="Canada">Canada</option>
              <option value="Cayman Islands">Cayman Islands</option>
              <option value="Chile">Chile</option>
              <option value="China">China</option>
              <option value="Costa Rica">Costa Rica</option>
              <option value="Dominican Republic">Dominican Republic</option>
              <option value="Ecuador">Ecuador</option>
              <option value="Guam">Guam</option>
              <option value="Guatemala">Guatemala</option>
              <option value="Hong Kong">Hong Kong</option>
              <option value="India">India</option>
              <option value="Israel">Israel</option>
              <option value="Japan">Japan</option>
              <option value="Jordan">Jordan</option>
              <option value="Kuwait">Kuwait</option>
              <option value="Macau">Macau</option>
              <option value="Malaysia" selected="selected">Malaysia</option>
              <option value="Mexico">Mexico</option>
              <option value="New Zealand">New Zealand</option>
              <option value="Panama">Panama</option>
              <option value="Peru">Peru</option>
              <option value="Philippines">Philippines</option>
              <option value="Saudi Arabia">Saudi Arabia</option>
              <option value="Singapore">Singapore</option>
              <option value="South Africa">South Africa</option>
              <option value="South Korea">South Korea</option>
              <option value="Sri Lanka">Sri Lanka</option>
              <option value="Taiwan">Taiwan</option>
              <option value="Thailand">Thailand</option>
              <option value="U.S. Virgin Islands">U.S. Virgin Islands</option>
              <option value="United Arab Emirates">United Arab Emirates</option>
              <option value="United States">United States</option>
              <option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
              <option value="Venezuela">Venezuela</option>
            </select>
          </div>
          <label><?php __('Region / State'); ?>:</label>
          <div style="margin:1px 0 18px;">
            <select id="state" name="state" class="select req">
              <option value="">Select Region/State</option>
              <option value="Johor">Johor</option>
              <option value="Kedah">Kedah</option>
              <option value="Kelantan">Kelantan</option>
              <option value="Labuan">Labuan</option>
              <option value="Melaka">Melaka</option>
              <option value="Negeri Sembilan">Negeri Sembilan</option>
              <option value="Pahang">Pahang</option>
              <option value="Perak">Perak</option>
              <option value="Perlis">Perlis</option>
              <option value="Pulau Pinang">Pulau Pinang</option>
              <option value="Sabah">Sabah</option>
              <option value="Sarawak">Sarawak</option>
              <option value="Selangor">Selangor</option>
              <option value="Terengganu">Terengganu</option>
              <option value="Wilayah Persekutuan">Wilayah Persekutuan</option>
              <option value="Others">Others</option>
            </select>
          </div>
        </div>
        <div class="clear"></div>
        <div class="fLeft"><input type="button" value="<?php __('Back'); ?>" style="margin-top:20px; display:block;" onclick="history.go(-1);" /></div>
        <div class="fRight">
          <input type="submit" value="<?php __('Next Step'); ?>" style="margin-top:20px; display:block;" />
        </div>
    </form>
  </div>
</div>

<script type="text/javascript">
var _webroot = '<?php e($this->base); ?>';
function save () {
    var message = Ext.get('message');
    var focuson = '';

    if (validation('form-register') == false) {
        message.update('Please enter required information.');
        message.addClass('error').highlight();
        return false;
    }
    if (Ext.fly('password01').getValue() != Ext.fly('password02').getValue()) {
        message.update('Both password not matched.');
        message.addClass('error').highlight();
        Ext.fly('password02').addClass('invalid');
        Ext.fly('password02').up('div').prev('label').addClass('invalidText');
        return false;
    }

    transId = Ext.Ajax.request({
        form: 'form-register',
        success: function(response, opts) {
            var obj = Ext.decode(response.responseText);
            if (obj.status == false) {
                if (obj.mesg) {
                    message.update(obj.mesg);
                    message.addClass('error').slideIn().highlight();
                }
                if (Ext.isArray(obj.error)) {
                    errorFields(obj.error);
                }
            } else {
                if (obj.mesg) {
                    message.hide().update(obj.mesg);
                    message.addClass('success').slideIn().highlight().pause(5).slideOut('t', { useDisplay:true });
                }
                clearForm();

                document.location = _webroot+'/members/shipping';
            }
        },
        failure: function(response, opts) {
            message('server-side failure with status code '+response.status);
        },
        callback: function() {
            Ext.fly('status').slideOut('t', {
                easing: 'easeOut',
                useDisplay: true
            });
            Ext.each(Ext.query('input[type=submit],input[type=reset]', 'form-register'), function(e){ e.disabled = false; });
        }
    });

    if (Ext.Ajax.isLoading(transId)) {
        Ext.each(Ext.query('input[type=submit],input[type=reset]', 'form-register'), function(e){ e.disabled = true; });
        Ext.fly('status').update('Saving..');
        Ext.fly('status').slideIn('t', {
            easing: 'easeOut'
        });
    }

    return false;
} // save

function clearForm () {
    Ext.each(Ext.query('input[type=text], input[type=password], input[type=hidden], textarea', 'form-register'), function(e){
        e.value = '';
    });
} // clearForm

function cleanError (form) {
    Ext.fly('message').setStyle({ display:'none' }).removeClass('error');
    Ext.select('.invalid', false, form).removeClass('invalid');
    Ext.select('div.invalidField', false, form).remove();
    Ext.select('.invalidText', false, form).removeClass('invalidText');
} // cleanError

function validation (form) {
    var proceed = true;
    var focuson = '';

    cleanError(form);
    Ext.each(Ext.select('.req', false, form).elements, function(e){
        var el = Ext.get(e);

        if (!el.getValue() || el.getValue() == 'select..') {
            proceed = false;
            el.addClass('invalid');
            el.up('div').prev('label').addClass('invalidText');

            if (!focuson) {
                focuson = e.id;
                el.focus();
                el.fadeIn({
                    duration: 2.0
                });
            }
        }
    });

    return proceed;
} // validation

function errorFields (error) {
    var focuson = '';

    Ext.each(error, function(e) {
        var el  = Ext.get(e.id);
        var err = '<div class="invalidField" style="display:none;">'+e.code+'</div>';
            el.addClass('invalid');
            el.up('div').prev('label').addClass('invalidText');
            el.insertHtml('afterEnd', err);
            el.next('div.invalidField').slideIn('t', {
                duration:.4
            });
            if (e.clear) {
                el.dom.value = '';
            }
            if (!focuson) {
                focuson = e.id;
                el.focus();
                el.fadeIn({
                    duration: 2.0
                });
            }
    });
} // errorFields
</script>